<template>
  <div id="pano"></div>
</template>

<script setup>
import {
  reactive,
  ref,
  onMounted,
  onUnmounted,
  nextTick,
  defineProps,
  defineExpose
} from "vue";

const props = defineProps({
  xml: {
    type: String
  }
});

let krpano;

onMounted(() => {
  embedpano({
    xml: props.xml,
    target: "pano",
    html5: "only",
    mobilescale: 1,
    passQueryParameters: "startscene,startlookat",
    onready: data => {
      krpano = data;
      krpano.set("layer.visible", false);
    }
  });
});

onUnmounted(() => {
  if (krpano) {
    krpano.remove();
  }
});
</script>

<style scoped>
#pano {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>